.modal-qr-scanner {
    --background: "var(--ion-background-color,transparent-bg)";

    .inner-scroll {
        padding: 0;
    }

    .scroll-content {
        padding: 0 !important;
    }

    .content {
        background: transparent !important;
    }

    .transparent-bg {
        background-color: rgba(0, 0, 0, 0.85)
    }

    .scanner-top {
        height: 25%;
        position: relative;
        &>p {
            position: absolute;
            bottom: 0;
            font-size: 12px;
            color: #f97271;
            margin-bottom: 10px;
            width: 100%;
            text-align: center;
        }
    }

    .scanner-right {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 15%;
    }

    .scanner-left {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 15%;
        font-size: 12px;
        color: #f97271;
        text-align: center;
    }
}




.scanner-bottom {
    height: calc(84% - 70vw);
    text-align: center;
}

.scanner-content {
    position: relative;
    padding-top: 70%;

    .scanner-box {
        position: absolute;
        width: 70%;
        left: 15%;
        border: 1px solid #f97271;
        top: 0;
        bottom: 0;

        @keyframes linemove {
            from {
                top: 0;
            }

            to {
                top: 100%;
            }
        }

        .angle {
            border-color: #f97271;
            border-style: solid;
            position: absolute;
            width: 15px;
            height: 15px;
        }

        .angle-top-left {
            border-width: 2px 0 0 2px;
            top: 0;
        }

        .angle-top-right {
            border-width: 2px 2px 0 0;
            right: 0;
        }

        .angle-bottom-right {
            border-width: 0 2px 2px 0;
            bottom: 0;
            right: 0;
        }

        .angle-bottom-left {
            border-width: 0 0 2px 2px;
            bottom: 0;
        }

        .aimate-line {
            height: 3px;
            width: 100%;
            background: radial-gradient(#f97271 24%, transparent 100%);
            position: absolute;
            animation: linemove 3s linear infinite;
        }
    }
}